/*------------------------------------*\
    #HEADER
\*------------------------------------*/

/**
 * Global block at the top of each page containing the navigation, logo, and other potential contents
 */
.c-header {
   position: relative;
   background: $color-gray-88;
   color: $color-gray-27;
   padding: $spacing;
   @include hideScrollbar();

   @media all and (min-width: $bp-large) {
      padding: $spacing-large;
      min-height: 100vh;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      overflow: auto;
      width: $l-sidebar-width; //Because fixed position
   }
}

/**
 * Header inner
 */
.c-header__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;

   @media all and (min-width: $bp-large) {
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
   }
}

/**
 * Header navigation button
 * 1) Button used to toggle the navigation on/off on small screens
 */
.c-header__nav-btn {
   margin-left: auto;

   // Pseudo / breakout element that enables clicking/tabbing outside of the menu to close it
   &[aria-expanded='true']::after {
      position: fixed;
      top: 0;
      left: 0;

      content: '';

      width: 100vw;
      height: 100vh;
   }

   @media all and (min-width: $bp-large) {
      display: none;
   }
}

/**
 * Header navigation conntainer
 * 1) Contains the primary navigation and other possible patterns
 */
.c-header__nav-container {
   display: none;

   @media all and (min-width: $bp-large) {
      display: block;
   }
}

/**
 * Active header nav container
 */
.c-header__nav-container.is-active {
   display: block;
   position: absolute;
   background: $color-gray-88;
   top: 100%;
   left: 0;
   width: 100%;
   z-index: 5;
   padding: $spacing;

   @media all and (min-width: $bp-large) {
      display: block;
      position: static;
      padding: 0;
      margin-left: auto;
      width: inherit;
   }
}
